<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Carousel Demo (dojo.store)</title>

	<script type="text/javascript" src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
	<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true,  has: {'dojo-bidi': true }"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/connect",
			"dojo/ready",
			"dijit/registry",
			"dojo/store/Memory",
			"doh/runner",
			"dojo/dom",
			"dojo/query",			
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/StoreCarousel",			
			"dojox/mobile/Carousel",
			"dojox/mobile/Button"
		], function(connect, ready, registry, Memory, runner, dom, query){		
			var categ = [
				{src:"../../images/dish1.jpg", value:"&#1513;&#1500;&#1493;&#1501; dish", headerText:"&#1513;&#1500;&#1493;&#1501; dish!"},
				{src:"../../images/glass1.jpg", value:"&#1513;&#1500;&#1493;&#1501; glass", headerText:"&#1513;&#1500;&#1493;&#1501; glass!"}
			];
						 
			store1 = new Memory({data:categ, idProperty: "name"});
			
			ready(function(){
				connect.subscribe("/dojox/mobile/carouselSelect", function(w, img, item, idx){
					if(w.id == "carousel1"){
						var dish = [
							{src:"../../images/dish1.jpg", value:"&#1513;&#1500;&#1493;&#1501; dish!", headerText:"&#1513;&#1500;&#1493;&#1501; dish!"},
							{src:"../../images/glass1.jpg", value:"&#1513;&#1500;&#1493;&#1501; glass!", headerText:"&#1513;&#1500;&#1493;&#1501; glass!"}						];
						var glass = [
							{src:"../../images/stone1.jpg", value:"&#1513;&#1500;&#1493;&#1501; stone!", headerText:"&#1513;&#1500;&#1493;&#1501; stone!"},
							{src:"../../images/shell1.jpg", value:"&#1513;&#1500;&#1493;&#1501; shell!", headerText:"&#1513;&#1500;&#1493;&#1501; shell!"}
						];
						var store2 = Memory({data:eval(item.value.split(" ")[1]), idProperty: "name"});
						
						var w2 = registry.byId("carousel2");
						w2.set("title", item.value);						
						w2.setStore(store2);						
						registry.byId("rect1").domNode.style.display = "none";
					}
				});
				runner.register("Bidi Carousel", [
					{
						name: "mobile",					
						runTest: function(){			
							query(".mblCarouselItemHeaderText, .mblCarouselTitle").forEach(function(node, index, arr){					
								if(node.innerHTML)							
									runner.is(String.fromCharCode(8235), node.innerHTML.charAt(0), "CarouselItem's header should have direction correspondent to 'textDir'");
							});								
						}
					}
				]);	 			
				
				runner.register("log", function(){
					dom.byId('failures').innerHTML = runner._failureCount;
					dom.byId('errors').innerHTML = runner._errorCount;
				});
				runner.run();				
			});
		},
		toggleTextDir = function(){		
			w2 = dijit.registry.byId("carousel2");
			w2.set("textDir", (w2.get("textDir") !== "rtl") ? "rtl" : "ltr");
		});	
	</script>
</head>
<body style="visibility:hidden;background-color:#6D6D6D">
    <button data-dojo-type="dojox.mobile.Button" data-dojo-props='type:"button", onClick:function(){ toggleTextDir(); }'>Toggle second carousel textDir</button>
	<br>
	<div id="foo" data-dojo-type="dojox.mobile.ScrollableView">
		<div id="carousel1" data-dojo-type="dojox.mobile.StoreCarousel"
			data-dojo-props='textDir: "rtl", height:"150px", navButton:true, store:store1, itemWidth:156, title:"&#1513;&#1500;&#1493;&#1501; Category!"'></div>
		<div id="carousel2" data-dojo-type="dojox.mobile.StoreCarousel"
			data-dojo-props='textDir: "rtl", height:"110px", navButton:true, itemWidth:100'></div>
		<div id="rect1" data-dojo-type="dojox.mobile.RoundRect" style="display:none"></div>
	</div>
	<br>Errors:&nbsp;<span id="errors">?</span>
	<br>Failures:&nbsp;<span id="failures">?</span>		
</body>
</html>
